<!DOCTYPE html>
<html>
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  

  
  <title>WEB  HTTP相关知识 | Tech Holics</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="HTTP/3 不再基于 TCP 而是采用了 UDPChrome 最多允许对同一个 Host 建立六个 TCP 连接,不同的浏览器有一些区别现实中的 HTTP2 都是在 HTTPS 上实现的HTTP/1HTTP 1.0 与 1.1 的主要区别在于长连接支持、多路复用、带宽节约与数据压缩等主要缺陷：  连接无法复用 Head-Of-Line Blocking（HOLB，队头阻塞） 协议开销大 安全因素">
<meta property="og:type" content="article">
<meta property="og:title" content="WEB  HTTP相关知识">
<meta property="og:url" content="http://houzhj.gitee.io/2019/10/18/HTTP相关知识/index.html">
<meta property="og:site_name" content="Tech Holics">
<meta property="og:description" content="HTTP/3 不再基于 TCP 而是采用了 UDPChrome 最多允许对同一个 Host 建立六个 TCP 连接,不同的浏览器有一些区别现实中的 HTTP2 都是在 HTTPS 上实现的HTTP/1HTTP 1.0 与 1.1 的主要区别在于长连接支持、多路复用、带宽节约与数据压缩等主要缺陷：  连接无法复用 Head-Of-Line Blocking（HOLB，队头阻塞） 协议开销大 安全因素">
<meta property="og:locale" content="en">
<meta property="og:updated_time" content="2019-10-18T09:08:09.943Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="WEB  HTTP相关知识">
<meta name="twitter:description" content="HTTP/3 不再基于 TCP 而是采用了 UDPChrome 最多允许对同一个 Host 建立六个 TCP 连接,不同的浏览器有一些区别现实中的 HTTP2 都是在 HTTPS 上实现的HTTP/1HTTP 1.0 与 1.1 的主要区别在于长连接支持、多路复用、带宽节约与数据压缩等主要缺陷：  连接无法复用 Head-Of-Line Blocking（HOLB，队头阻塞） 协议开销大 安全因素">
  
    <link rel="alternate" href="/atom.xml" title="Tech Holics" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  <link rel="stylesheet" href="/css/style.css">
</head>
</html>
<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">Tech Holics</a>
      </h1>
      
        <h2 id="subtitle-wrap">
          <a href="/" id="subtitle">科学技术是第一生产力</a>
        </h2>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://houzhj.gitee.io"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main"><article id="post-HTTP相关知识" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/10/18/HTTP相关知识/" class="article-date">
  <time datetime="2019-10-18T09:08:09.943Z" itemprop="datePublished">2019-10-18</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      WEB  HTTP相关知识
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="HTTP-3-不再基于-TCP-而是采用了-UDP"><a href="#HTTP-3-不再基于-TCP-而是采用了-UDP" class="headerlink" title="HTTP/3 不再基于 TCP 而是采用了 UDP"></a>HTTP/3 不再基于 TCP 而是采用了 UDP</h3><h3 id="Chrome-最多允许对同一个-Host-建立六个-TCP-连接-不同的浏览器有一些区别"><a href="#Chrome-最多允许对同一个-Host-建立六个-TCP-连接-不同的浏览器有一些区别" class="headerlink" title="Chrome 最多允许对同一个 Host 建立六个 TCP 连接,不同的浏览器有一些区别"></a>Chrome 最多允许对同一个 Host 建立六个 TCP 连接,不同的浏览器有一些区别</h3><h3 id="现实中的-HTTP2-都是在-HTTPS-上实现的"><a href="#现实中的-HTTP2-都是在-HTTPS-上实现的" class="headerlink" title="现实中的 HTTP2 都是在 HTTPS 上实现的"></a>现实中的 HTTP2 都是在 HTTPS 上实现的</h3><h3 id="HTTP-1"><a href="#HTTP-1" class="headerlink" title="HTTP/1"></a>HTTP/1</h3><p>HTTP 1.0 与 1.1 的主要区别在于长连接支持、多路复用、带宽节约与数据压缩等<br>主要缺陷：</p>
<ol>
<li>连接无法复用</li>
<li>Head-Of-Line Blocking（HOLB，队头阻塞）</li>
<li>协议开销大</li>
<li>安全因素：HTTP/1 在传输数据时，所有传输的内容都是明文，客户端和服务器端都无法验证对方的身份，这在一定程度上无法保证数据的安全性</li>
</ol>
<p>因为 HTTP/1 的问题，我们会引入雪碧图、将小图内联、使用多个域名等等的方式来提高性能。<br>不过这些优化都绕开了协议本身，直到 2009 年，谷歌公开了自行研发的 SPDY 协议，它主要解决 HTTP/1.1 效率不高的问题。</p>
<p>直到这时，才算是正式改造了 HTTP 协议本身。SPDY 进行延迟降低、header 压缩等改进，其实践证明了这些优化的效果，也最终带来 HTTP/2 的诞生。<br>SPDY 协议在 Chrome 浏览器上证明可行以后，就被当作 HTTP/2 的基础，主要特性都在 HTTP/2 之中得到继承</p>
<h3 id="HTTP-2"><a href="#HTTP-2" class="headerlink" title="HTTP/2"></a>HTTP/2</h3><p>2015 年，继承于 SPDY 的 HTTP/2 协议发布了。HTTP/2 是 HTTP/1 的替代品，但它不是重写，协议中还保留着第一代的一些内容，比如 HTTP 方法、状态码与语义等都与 HTTP/1 一样。</p>
<p>HTTP/2 基于SPDY3，专注于性能，最大的一个目标是在用户和网站间只用一个连接。</p>
<p>HTTP/2 由两个规范组成：</p>
<ol>
<li>Hypertext Transfer Protocol version 2 - RFC7540</li>
<li>HPACK - Header Compression for HTTP/2 - RFC7541</li>
</ol>
<p>特性：</p>
<ol>
<li>HTTP/2 采用二进制格式传输数据，而非 HTTP/1 的文本格式，二进制协议解析起来更高效</li>
<li>多路复用  很好地解决了浏览器限制同一个域名下的请求数量的问题，同时也更容易实现全速传输，毕竟新开一个 TCP 连接都需要慢慢提升传输速度</li>
<li>Header 压缩</li>
<li>Server Push  服务端能通过 push 的方式将客户端需要的内容预先推送过去</li>
</ol>
<h3 id="HTTP-3"><a href="#HTTP-3" class="headerlink" title="HTTP/3"></a>HTTP/3</h3><p>虽然 HTTP/2 解决了很多之前旧版本的问题，但是它还是存在一个巨大的问题，主要是底层支撑的 TCP 协议造成的。</p>
<p>上文提到 HTTP/2 使用了多路复用，一般来说同一域名下只需要使用一个 TCP 连接。但当这个连接中出现了丢包的情况，那就会导致 HTTP/2 的表现情况反倒不如 HTTP/1 了。</p>
<p>因为在出现丢包的情况下，整个 TCP 都要开始等待重传，也就导致了后面的所有数据都被阻塞了。但是对于 HTTP/1.1 来说，可以开启多个 TCP 连接，出现这种情况反到只会影响其中一个连接，剩余的 TCP 连接还可以正常传输数据。</p>
<p>那么可能就会有人考虑到去修改 TCP 协议，其实这已经是一件不可能完成的任务了，因为 TCP 存在的时间实在太长，已经充斥在各种设备中，并且这个协议是由操作系统实现的，更新起来不大现实。</p>
<p>基于这个原因，Google 就自己架起炉灶搞了一个基于 UDP 协议的 QUIC 协议，并且使用在了 HTTP/3 上，HTTP/3 之前名为 HTTP-over-QUIC，从这个名字中我们也可以发现，HTTP/3 最大的改造就是使用了 QUIC。</p>
<p>QUIC 虽然基于 UDP，但是在原本的基础上新增了很多功能，接下来我们重点介绍几个 QUIC 功能。</p>
<p>QUIC 功能：</p>
<ol>
<li>0RTT  </li>
<li>多路复用</li>
<li>加密认证的报文</li>
<li>前向纠错机制</li>
</ol>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://houzhj.gitee.io/2019/10/18/HTTP相关知识/" data-id="ck25rnaq90001ac0li105ehns" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
    
<nav id="article-nav">
  
  
    <a href="/2019/10/17/同步异步阻塞非阻塞/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">同步异步阻塞非阻塞</div>
    </a>
  
</nav>

  
</article>

</section>
        
          <aside id="sidebar">
  
    

  
    

  
    
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/10/">October 2019</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2019/10/18/HTTP相关知识/">WEB  HTTP相关知识</a>
          </li>
        
          <li>
            <a href="/2019/10/17/同步异步阻塞非阻塞/">同步异步阻塞非阻塞</a>
          </li>
        
          <li>
            <a href="/2019/10/17/三次握手和四次挥手/">三次握手和四次挥手</a>
          </li>
        
          <li>
            <a href="/2019/10/15/Web并发量测试/">WEB   Web并发量测试</a>
          </li>
        
          <li>
            <a href="/2019/10/15/hello-world/">Hello World</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2019 SoSo<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  <script src="/fancybox/jquery.fancybox.pack.js"></script>


<script src="/js/script.js"></script>



  </div>
</body>
</html>